{% extends 'base.html' %}

{% block title %}
    文章详情
{% endblock %}

{% block content %}

    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <div class="card col-auto border-0">   {# 文章详情区域 #}
                    <div class="card-body">
                        <h1 class="card-title h4 mb-4">{{ article.title }}</h1>
                        <h2 class="card-subtitle h6 mb-3 text-body-secondary">{{ article.author }} {{ article.created_time }}</h2>
                        <div class="card-text">
                            {{ article.content|safe }}
                        </div>
                    </div>

                </div>   <!-- 文章结束区域 -->


                <!-- 查看评论按钮 -->
                <button type="button" data-toggle="modal" data-target="#commentModal"
                        class="Button ContentItem-action FEfUrdfMIKpQDJDqkjte Button--plain Button--withIcon Button--withLabel fEPKGkUK5jyc4fUuT0QP B46v1Ak6Gj5sL2JTS4PY RuuQ6TOh2cRzJr6WlyQp">
                    <span style="display: inline-flex; align-items: center;">​<svg width="1.2em" height="1.2em"
                                                                                   viewBox="0 0 24 24"
                                                                                   class="Zi Zi--Comment Button-zi t2ntD6J1DemdOdvh5FB4"
                                                                                   fill="currentColor"><path
                            fill-rule="evenodd"
                            d="M12 2.75a9.25 9.25 0 1 0 4.737 17.197l2.643.817a1 1 0 0 0 1.25-1.25l-.8-2.588A9.25 9.25 0 0 0 12 2.75Z"
                            clip-rule="evenodd"></path></svg></span>55 条评论
                </button>

                {% include "block/article_comment_list.html" %}

            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
{% endblock %}